<template>
  <div class="genomics-page">
    <div class="main-content">
      <!-- 左侧：数据资源 (20% width) -->
      <div class="left-section">
        <h2 class="section-title">数据资源</h2>
        <el-collapse v-model="activeCollapse" accordion class="resource-collapse">
          <!-- 原有的折叠项保持不变 -->
          <el-collapse-item name="1">
            <template #title>
              <span class="custom-title">DNA & RNA</span>
            </template>
            <div class="collapse-content">
              <p @click="navigateTo('http://111.160.49.98:60/herbalfront')">整合药用植物基因组平台</p>
              <p @click="navigateTo('http://111.160.49.98:60/herbalfront')">中药标准核酸序列数据库</p>
              <p @click="navigateTo('http://42.193.115.86:8082/')">天麻泛基因组多组学平台</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              <span class="custom-title">化学分子</span>
            </template>
            <div class="collapse-content">
              <p @click="navigateTo('http://111.160.49.98:60/herbalfront')">天然产物电荷图谱库</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template #title>
              <span class="custom-title">文献 & 知识</span>
            </template>
            <div class="collapse-content">
              <p>内容筹备中</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template #title>
              <span class="custom-title">图像</span>
            </template>
            <div class="collapse-content">
              <p>内容筹备中</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="5">
            <template #title>
              <span class="custom-title">应用转化</span>
            </template>
            <div class="collapse-content">
              <p @click="navigateTo('http://111.160.49.98:60/microbe')">药用微生物资源创新与转化研究平台</p>
            </div>
          </el-collapse-item>
        </el-collapse>

        <!-- 新增的技术服务部分 -->
        <h2 class="section-title" style="margin-top: 20px;">技术服务</h2>
        <el-collapse v-model="activeTechService" accordion class="resource-collapse">
          <el-collapse-item name="1">
            <template #title>
              <span class="custom-title">微生物分离鉴定</span>
            </template>
            <div class="collapse-content">
              <p>药用植物共生细菌</p>
              <p>药用真菌</p>
              <p>药用植物病原菌</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              <span class="custom-title">微生物菌株保藏</span>
            </template>
            <div class="collapse-content">
              <p>敬请期待</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template #title>
              <span class="custom-title">功能菌株筛选创制</span>
            </template>
            <div class="collapse-content">
              <p>药用植物促生菌筛选</p>
              <p>药用植物病害拮抗菌筛选</p>
              <p>微生物菌肥开发</p>
              <p>菌株选育</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template #title>
              <span class="custom-title">微生物菌株发酵</span>
            </template>
            <div class="collapse-content">
              <p>敬请期待</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 中间：热门资源 (60% width) -->
      <div class="middle-section">
        <h2 class="section-title">热门资源</h2>
        <div class="card-grid">
          <div
              v-for="(item, index) in hotResources"
              :key="index"
              class="resource-card"
              @click="navigateTo(item.url)"
          >
            <!-- 上部分：图片和标题 -->
            <div class="card-top">
              <img :src="item.image" alt="资源图标" class="card-image">
              <div class="card-title-section">
                <span class="card-title">{{ item.name }}</span>
                <div class="keywords">
              <span class="keyword" v-for="(keyword, kIndex) in item.keywords" :key="kIndex">
                {{ keyword }}
              </span>
                </div>
              </div>
            </div>

            <!-- 下部分：简介 -->
            <div class="card-description">
              {{ item.description }}
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：新闻动态和联系我们 (20% width) -->
      <div class="right-section">
        <!-- 新闻动态 -->
        <div class="news-section">
          <h2 class="section-title">新闻动态</h2>
          <div class="news-card" v-for="(news, index) in newsList" :key="index">
            <div class="news-date">
              <div class="date-month">{{ news.date.monthDay }}</div>
              <div class="date-year">{{ news.date.year }}</div>
            </div>
            <div class="news-content">
              {{ news.title }}
            </div>
          </div>
        </div>

        <!-- 联系我们 -->
        <div class="contact-section">
          <h2 class="section-title">联系我们</h2>
          <div class="contact-card">
            <div class="contact-name">刘为 博士</div>
            <div class="contact-info">
              <div>电话：010-64089520</div>
              <div>邮箱：Lwlancerlll@outlook.com</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="center-section">
      <div class="collaborators-section">
        <h3 class="collaborators-title">合作单位</h3>
        <div class="title-divider"></div>
      </div>

      <!-- 图片展示部分 - 修改为两行，每行四个 -->
      <div class="image-section">
        <div class="image-row">
          <div class="image-wrapper">
            <el-image class="image-item" src="/images/cooperation/tag7.jpg" fit="scale-down"></el-image>
          </div>
          <div class="image-wrapper">
            <el-image class="image-item" src="/images/cooperation/tag3.png" fit="scale-down"></el-image>
          </div>
          <div class="image-wrapper">
            <el-image class="image-item" src="/images/cooperation/tag1.jpg" fit="scale-down"></el-image>
          </div>
          <div class="image-wrapper">
            <el-image class="image-item" src="/images/cooperation/tag8.png" fit="scale-down"></el-image>
          </div>
          <div class="image-wrapper">
            <el-image class="image-item" src="/images/cooperation/tag5.png" fit="scale-down"></el-image>
          </div>
          <div class="image-wrapper">
            <el-image class="image-item" src="/images/cooperation/tag6.jpg" fit="scale-down"></el-image>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeCollapse = ref('0');
const activeTechService = ref('0');

// 热门资源列表
const hotResources = ref([
  {
    name: '天然产物电荷图谱库',
    image: '/images/天然产物电荷.png',
    url: 'http://111.160.49.98:60/herbalfront',
    keywords: ['化学', '分子'],
    description: '含XX种天然产物分子的电荷分布，优化结构信息'
  },
  {
    name: '天麻泛基因组多组学平台',
    image: '/images/天麻.png',
    url: 'http://42.193.115.86:8082/',
    keywords: ['DNA', '植物'],
    description: '基于5个天麻de novo组装构建的泛基因组与超过200个个体的变异、基因组表达信息'
  },
  {
    name: '整合药用植物基因组平台',
    image: '/images/整合药用.jpg',
    url: 'https://www.bic.ac.cn/IMP',
    keywords: ['基因组', 'RNA'],
    description: '汇聚1024种药用植物的基因组、转录组及合成酶等核心信息，为药用植物研究和新药开发提供全面、权威的数据支持。'
  },
  {
    name: '中药标准核酸序列平台',
    image: '/images/中草药目录管理.png',
    url: 'http://111.160.49.98:60/herbalfront',
    keywords: ['DNA', '标准'],
    description: '收录《中国药典（2025版）》及《香港中药材标准》200余种基原的DNA标准核酸序列，为中药材鉴定提供权威、准确的数据支持。'
  },
  {
    name: '药用微生物资源创新与转化研究平台',
    image: '/images/微生物项目管理.svg',
    url: 'http://111.160.49.98:60/microbe',
    keywords: ['微生物', '转化'],
    description: '涵盖900余种药用植物共生细菌及800种菌物药的保藏与应用资源，助力微生物药用研究与转化。'
  },
  {
    name: '叶绿体基因组信息资源平台',
    image: '/images/tag_9.jpg',
    url: 'https://ngdc.cncb.ac.cn/cgir/',
    keywords: ['基因组'],
    description: '整合收录了16,717个物种的34,923份叶绿体基因组数据，支持植物系统进化、分子鉴定和生物多样性等相关研究。'
  }
]);
// 新闻动态数据
const newsList = ref([
  {
    date: { monthDay: '08-09', year: '2025' },
    title: '分子生药学30周年发展研讨会暨第十三届暑期…'
  },
  {
    date: { monthDay: '08-05', year: '2025' },
    title: '第二届《分子生药学》师资培训会顺利召开'
  },
  {
    date: { monthDay: '07-21', year: '2025' },
    title: '中药标准核酸序列平台开发完成'
  }
]);

const navigateTo = (url) => {
  if (url !== '#') {
    window.location.href = url;
  }
};
</script>

<style scoped>
.genomics-page {
  font-family: Arial, sans-serif;
  max-width: 2000px;
  margin: 0 12px 0 12px;
  padding: 0 20px 15px 20px;
}

/* 主要内容布局 */
.main-content {
  display: flex;
  gap: 30px;
}

.left-section {
  flex: 2; /* 20% width */
}

.middle-section {
  flex: 6; /* 60% width */
}

.right-section {
  flex: 2; /* 20% width */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-title {
  color: #37548d;
  font-weight: bold;
  font-size: 25px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #37548d;
}

.resource-collapse :deep(.ep-collapse-item__header) {
  background-color: #1d4f9c;
  border-bottom: 1px solid #bfc3cc;
}

.resource-collapse :deep(.ep-collapse-item__arrow) {
  color: white;
  font-size: 16px;
}

.custom-title {
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding-left: 10px;
}

:deep(.el-collapse-item__header) {
  background-color: #37548d !important;
  color: white !important;
  font-weight: bold;
  padding: 0 15px;
  border-radius: 4px;
  margin-bottom: 5px;
}

:deep(.el-collapse-item__content) {
  padding: 0;
}

.collapse-content {
  background-color: #eef2f4;
  color: #37548d;
  padding: 15px;
  border-radius: 0 0 4px 4px;
}

.collapse-content p {
  margin: 8px 0;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.6;
}

.collapse-content p:hover {
  text-decoration: underline;
}

/* 热门资源卡片样式 */
/* 修改卡片样式 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.resource-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 155px; /* 增加卡片高度 */
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 卡片上部分 */
.card-top {
  display: flex;
  gap: 15px;
  margin-bottom: 14px;
}

.card-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.card-title-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  display: flex;
  color: #3d3a3a;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 14px;
}

.keywords {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.keyword {
  background-color: #8fcbef;
  color: #37548d;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 14px;
  text-align: center; /* 文字居中 */
  min-width: 50px; /* 设置最小宽度 */
  display: inline-flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  box-sizing: border-box; /* 包含padding在宽度内 */
}

/* 卡片下部分 */
.card-description {
  color: #413f3f;
  font-size: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    height: auto;
  }
}


/* 新闻动态样式 */
.news-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.news-card {
  display: flex;
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 6px;
  gap: 12px;
}

.news-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.date-month {
  color: #37548d;
  font-weight: bold;
  font-size: 16px;
}

.date-year {
  color: #666;
  font-weight: bold;
  font-size: 12px;
}

.news-content {
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 联系我们样式 */
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-card {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 6px;
}

.contact-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.contact-info {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
  }

  .left-section, .middle-section, .right-section {
    flex: 1 1 100%;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}


/* 合作单位部分样式 */
.center-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  background: white;
  margin-top: 30px;
  border-top: 1px solid #e0e0e0;
}

.collaborators-section {
  text-align: center;
  width: 100%;
}

.collaborators-title {
  color: #37548d; /* 改为页面主题蓝色 */
  font-size: 34px;
  margin-top: 10px;
  font-weight: bold;
  margin-bottom: 5px;
}

.title-divider {
  height: 2px;
  background-color: #37548d; /* 改为页面主题蓝色 */
  width: 500px;
  margin: 0 auto;
}

/* 图片部分样式 */
.image-section {
  margin-top: 30px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.image-row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.image-wrapper {
  flex: 0 0 180px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.image-wrapper:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.image-item {
  max-width: 100%;
  height: 90px;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .image-row {
    gap: 30px;
  }

  .image-wrapper {
    flex: 0 0 160px;
  }
}

@media (max-width: 992px) {
  .title-divider {
    width: 300px;
  }

  .image-row {
    gap: 20px;
    flex-wrap: wrap;
  }

  .image-wrapper {
    flex: 0 0 140px;
  }
}

@media (max-width: 768px) {
  .collaborators-title {
    font-size: 28px;
  }

  .title-divider {
    width: 200px;
  }

  .image-row {
    gap: 15px;
  }

  .image-wrapper {
    flex: 0 0 120px;
  }

  .image-item {
    height: 70px;
  }
}

@media (max-width: 576px) {
  .image-row {
    gap: 10px;
  }

  .image-wrapper {
    flex: 0 0 calc(50% - 20px);
    max-width: 130px;
  }
}

</style>